{% extends 'layout.html' %}

{% block conten %}
    <div class="container">
        <div class="panel panel-default">
          <div class="panel-heading">表单</div>
          <div class="panel-body">
             <form id="formAdd" novalidate>
                <div class="clearfix">
                  {% for field in form %}
                      <div class="col-xs-6">
                          <div class="form-group" style="position: relative; margin-bottom: 20px;">
                              <label>{{ field.label }}</label>
                              {{ field }}
                              <span class="error-msg" style="color: red; position: absolute;"></span>
                          </div>
                       </div>
                  {% endfor %}
                  <div class="col-xs-12">
                       <button id="btnAdd" type="button" class="btn btn-primary">提 交</button>
                  </div>
                </div>
             </form>
          </div>
        </div>

    <div class="panel panel-default">
            <div class="panel-heading">
             <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
             任务列表
         </div>
            <table class="table table-bordered">
          <thead>
            <tr>
              <th>ID</th>
              <th>标题</th>
              <th>级别</th>
              <th>负责人</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
          {% for obj in queryset %}
            <tr>
              <td>{{ obj.id }}</td>
              <td>{{ obj.title }}</td>
              <td>{{ obj.get_level_display }}</td>
              <td>{{ obj.user.username }}</td>

              <td>
                  <a class="btn btn-primary btn-xs" href="#">编辑</a>
                  <input class="btn btn-danger btn-xs btn-delete" type="button" value="删除">
              </td>
            </tr>
          {% endfor %}
          </tbody>
        </table>

        </div>

    <ul class="pagination">
        {{ page_string }}
    </ul>

    <div style="height: 1000px;"></div>
        <hr>

    <h1>Ajax学习</h1>
        <h3>实例ajax_get</h3>
        <input id="btn1" type="button" class="btn btn-primary" value="点击">

        <h3>实例ajax_post</h3>
        <input type="text" id="txtUser" placeholder="用户名">
        <input type="text" id="txtAge" placeholder="年龄">
        <input type="button" id="btn2" class="btn btn-primary" value="点击2">

         <h3>实例ajax_from</h3>
        <form action="" id="form3">
        <input type="text" name="user" placeholder="用户名">
        <input type="text" name="age" placeholder="年龄">
        <input type="text" name="email" placeholder="邮箱">
        <input type="text" name="more" placeholder="简介">
        </form>
        <input type="button" id="btn3" class="btn btn-primary" value="点击3">

 </div>
{% endblock %}


{% block js %}
    <script type="text/javascript">


     $(function(){
         bindBtn1Event();
         bindBtn2Event();
         bindBtn3Event();
         bindBtnAddEvent();
     })



     function bindBtn1Event (){
        $('#btn1').click(function(){
            $.ajax({
                url: '/task/ajax/',
                type:"post",
                data:{
                    n1:123,
                    n2:456
                },
                dataType:"JSON",
                success: function (res){
                    console.log(res.status);
                    console.log(res.data);
                }
            })
        })
     };

     function bindBtn2Event (){
        $('#btn2').click(function(){
            $.ajax({
                url: '/task/ajax/',
                type:"post",
                data:{
                    name:$("#txtUser").val(),
                    age:$("#txtAge").val()
                },
                dataType:"JSON",
                success: function (res){
                    console.log(res.status);
                    console.log(res.data);
                }
            })
        })
     };

     function bindBtn3Event (){
        $('#btn3').click(function(){
            $.ajax({
                url: '/task/ajax/',
                type:"post",
                data:$("#form3").serialize(),
                dataType:"JSON",
                success: function (res){
                    console.log(res.status);
                    console.log(res.data);
                }
            })
        })
     };

     function bindBtnAddEvent (){
        $('#btnAdd').click(function(){
            $('.error-msg').empty();
            $.ajax({
                url: '/task/add/',
                type:"post",
                data:$("#formAdd").serialize(),
                dataType:"JSON",
                success: function (res){
                   if(res.status){
                       alert("添加成功")
                       // 用js刷新
                       location.reload();
                   }
                   else {
                       console.log(res.error)
                       $.each(res.error, function(name, data){
                           $("#id_" + name).next().text(data[0])
                       })
                   }
                }
            })
        })
     };






    </script>

{% endblock %}